import { Col, Row, Statistic,Calendar } from 'antd';
import React, {useState, useEffect } from 'react';
import CountUp from 'react-countup';
import style from './style.module.scss'
import Stat from './sevices/api'
import {ShoppingOutlined ,UserOutlined,UserAddOutlined}from'@ant-design/icons'

const {box , rlbox}=style
const formatter = (value) => <CountUp end={value} separator="," />;
const App = () => {
const [goodslist,setGoodslist]=useState([])
const [userlist,setuserList]=useState([])
const [adminList,setadminList]=useState([])
  const getGoods=async()=>{
    let res = await Stat['getGoods']()
    console.log(res);
    setGoodslist(res.data)
  }
  const getUser=async()=>{
    let res = await Stat['getUser']()
    setuserList(res.data)
  }
  const getAdmin=async()=>{
      let res = await Stat['getAdmin']()
      setadminList(res.data)
  }
  useEffect(()=>{getGoods()},[])
  useEffect(()=>{getUser()},[])
  useEffect(()=>{getAdmin()},[])
  return( <><div className={box}>
    <Row gutter={16}>
      <Col span={8}>
       <ShoppingOutlined style={{fontSize:'30px' }} /> <Statistic title="平台房源数量" value={goodslist.length} formatter={formatter} />
      </Col>
      <Col span={8}>
      <UserOutlined  style={{fontSize:'30px'}}/> <Statistic title="APP用户数量" value={userlist.length} precision={2} formatter={formatter} />
      </Col>
      <Col span={8}>
      <UserAddOutlined style={{fontSize:'30px' }}/><Statistic title="后台管理员数量" value={adminList.length} precision={2} formatter={formatter} />
      </Col>
    </Row>
  </div><div className={rlbox}><Calendar/></div></> )
};
export default App;

// const App = () => {
// return( <>
 
// </> )
// }
// export default App